<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="box">
        <div class="xbox">hello</div>
        <span>文字1</span>
        <span abc="ly">文字2</span>
        <span>文字3</span>
        <span abc="ly">文字4</span>
        <div class="xbox">world</div>
        <p abc="ly">段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <div abc="ly" class="xbox">hahha</div>
        <h3>这是标题1</h3>
        <h3>这是标题2</h3>
        <h3>这是标题3</h3>
        <div class="xbox">123214</div>
        <div class="xbox cont">heiheihiehei</div>
        <div class="cont xbox">hi</div>
        <div class="xbox">abc</div>
    </div>
    <hr>
    <textarea id="txt1"></textarea>
    <input type="button" id="btn" value="转换">
    <textarea id="txt2"></textarea>
    <hr>
    <input type="text" id="username"><span></span>
</body>
<script>
    // 查询功能
    // var str = "ajh123sgf4vs23"
    // console.log(str.search(/\d/));
    // console.log(str.search(/6/));

    // search：根据正则查索引，查到了返回索引，查不到返回-1
    // var reg = /\d/g;
    // console.log(str.search(reg));
    // console.log(str.search(reg));
    // console.log(str.search(reg));
    // console.log(str.search(reg));

    // exec：根据正则查数据，返回值为查询到的数据，没查到为null，多次执行会在上次查询结束的位置开始下次查询
    // var reg = /\d/g;
    // console.log(reg.exec(str));
    // console.log(reg.exec(str));
    // console.log(reg.exec(str));
    // console.log(reg.exec(str));

    // match：根据正则查数据，将查询到的数据放在数组中，没查到为null
    // var reg = /\d/g;
    // console.log(str.match(reg));
    // console.log(str.match(reg));
    // console.log(str.match(reg));
    // console.log(str.match(reg));


    // var obox = document.querySelector(".box")
    // obox.onclick = function(eve){
    //     var e = eve || window.event;
    //     var target = e.target || e.srcElement;
    //     if(target.className.search(/cont/) !== -1){
    //         console.log(target);
    //     }
    // }

    // ========

    // 替换功能

    // var str = "刘帅军(特),魏新伟,项世浩,邬子卿,杨毅超,孙成宇(特),潘鑫,罗嘉鑫,浦洪浩,龚凯波,郑继超,张卓亚,黄晓霞,闫超杰,龙先旺,庄炜杰,靳历龙,何永哲,陈茜,鄢心娇,徐志浩,李嘉伟,王昊,卢艳芳,蒋文轩,姚文娅,李仲彬,王立志,贺洋,黄婷,王传伟,卫平朝,王志豪,卢金丽,周涛,宋亚利,李聪,李建坤,康瑾,丁仕江,王桐,亢秦奎,余文强,薛林(晚),胡云启,卢丽丽,殷嘉鑫,申琪琪,戴晔,杨智杰,文源开,史康年,潘明窑,吕连庆,沈天阳,姚亮,曲辰如,张明,王俊超,党莉萍,向涛,陈洋,梅春林(晚),王佳伟,任伟男,闫文豪,史义平";
    // console.log(str);
    // console.log(str.split(","));

    var otxt1 = document.getElementById("txt1")
    var otxt2 = document.getElementById("txt2")
    var obtn = document.getElementById("btn")

    obtn.onclick = function(){
        var str = otxt1.value;

        var reg = /<[^>]+>/g;

        otxt2.value = str.replace(reg, "");
    }

    // 贪婪特性：尽可能的多匹配

    // ---------

    // 验证功能

    var oun = document.getElementById("username")

    oun.onblur = function(){
        var str = this.value
        var reg = /^\w{6,18}$/;
        if(reg.test(str)){
            this.nextElementSibling.innerHTML = "符合"
        }else{
            this.nextElementSibling.innerHTML = "不符合"
        }
    }
    


    



</script>
</html>